<template>
  <div>
    <el-form class="model-form" label-width="120px" :model="property">
      <el-form-item label="名称" prop="name">
        <el-input v-model="property.name" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="标识符" prop="identifier">
        <el-input v-model="property.identifier" size="small" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select size="small" v-model="property.dataType.type" placeholder="请选择数据类型">
          <el-option label="int32" value="int32"></el-option>
          <el-option label="bool" value="bool"></el-option>
          <el-option label="enum" value="enum"></el-option>
          <el-option label="text" value="text"></el-option>
          <el-option label="date" value="date"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isSelectType('int32')">
        <el-col :span="3">
          取值范围
        </el-col>
        <el-col :span="5">
          <el-input size="mini" v-model="property.dataType.specs.min" placeholder="最小值">
          </el-input>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="5">
          <el-input size="mini" v-model="property.dataType.specs.max" placeholder="最大值">
          </el-input>
        </el-col>
        <el-col :span="10"></el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('bool')">
        <el-col :span="3">布尔值</el-col>
        <el-col :span="1">
          0 -
        </el-col>
        <el-col :span="3">
          <el-input size="mini" v-model="boolItem._true" placeholder="如:否">
          </el-input>
        </el-col>
        <el-col :span="1">&nbsp;
        </el-col>
        <el-col :span="1">
          1 -
        </el-col>
        <el-col :span="3">
          <el-input size="mini" v-model="boolItem._false" placeholder="如:是">
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('enum')">
        <el-col v-for="ei in enumItems" :span="24" :key="ei.value">
          <el-col :span="3">
            枚举值
          </el-col>
          <el-col :span="3">
            <el-input size="mini" v-model="ei.value" placeholder="如:0">
            </el-input>
          </el-col>
          <el-col :span="2">
            &nbsp;
          </el-col>
          <el-col :span="3">
            枚举描述
          </el-col>
          <el-col :span="5">
            <el-input size="mini" v-model="ei.name">
            </el-input>
          </el-col>
          <el-col :span="1">
            &nbsp;
          </el-col>
          <el-col :span="2">
            <el-button type="danger" size="mini" plain @click="delEnum(ei)">删除</el-button>
          </el-col>
        </el-col>
        <el-button @click="addEnumItem()" type="primary" size="mini" plain>添加</el-button>
      </el-form-item>
      <el-form-item v-if="isSelectType('text')">
        <el-col :span="3">数据长度</el-col>
        <el-col :span="3">
          <el-input size="mini" v-model="property.dataType.specs.length" placeholder="数据长度"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('date')">
        String类型的UTC时间戳（毫秒）
      </el-form-item>
      <el-form-item v-if="isProperty" label="读写" prop="accessMode">
        <el-radio-group v-model="property.accessMode">
          <el-radio label="rw">读写</el-radio>
          <el-radio label="r">只读</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  export default {
    name: 'PropertyModel',
    props: {
      property: null,
      enumItems: {},
      boolItem: {},
      isProperty: {
        typeof: Boolean,
        default(){
          return false;
        }
      }
    },
    data() {
      return {}
    },
    // 注册组件
    components: {},
    created() {},
    methods: {
      isSelectType(type) {
        return type == this.property.dataType.type
        // return true;
      },
      addEnumItem() {
        this.enumItems.push({})
      },
      delEnum(ei){
        let idx= this.enumItems.findIndex(e=>e.value==ei.value);
        this.enumItems.splice(idx,1);
      }
    }
  }
</script>

<style>
  .model-form .line {
    text-align: center;
  }
</style>
